<script>
    import {serverList} from './community'
    import BaseMessage from '@c/BaseMessage/BaseMessage'
    export default {
        data() {
            return {
                serverList,
                showmessage: false,
                mymessage: '',
            }
        },
        components: {
            BaseMessage,
        },
        methods: {
            /**
             * @Description 全局消息提示
             * @author Anonymous
             * @date 2019/6/6
             */
            myMessage(message) {
                this.mymessage = message
                this.showmessage = true
                setTimeout(() => {
                    this.mymessage = ''
                    this.showmessage = false
                }, 1500)
            },
            /**
             * @Description 跳转页面
             * @author Anonymous
             * @date 2019/6/6
             */
            e_gopage(v){
                if(v.isOpen){
                    wx.navigateTo({
                        url: v.path
                    })
                }else{
                    this.myMessage('敬请期待')
                }
            },

        },
        mounted() {
        },
        created() {
        }
    }
</script>
<template>
    <div class="community">
        <!--搜索区域-->
        <div class="searchArea">
            <div class="search_container">
                <img class="shibeiicon" src="/static/images/shibei@2x.png" alt="">
                <input class="searchinput" type="text" placeholder="搜索社区热闻">
                <img class="searchIcon" src="/static/images/search.png" alt="">
            </div>
        </div>
        <!--社区顶部-->
        <div class="community_top">
            <img class="topbanner"
                 src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/community/banner%402x.png" alt="">
            <div class="topserver">
                <div class="serverList" v-for="(v,i) in serverList" :key="i" @click="e_gopage(v)">
                    <img class="listIcon" :src="v.icon" alt="">
                    <span class="listLabel">{{v.label}}</span>
                </div>
            </div>
        </div>
        <!--社区新闻-->
        <div class="community_newArea">
            <!--养生之道-->
            <div class="newsList">
                <div class="listInfo">
                    <span class="infoLabel">苹果应该上午吃，还是晚上吃？终于有营养师说出明确答案了</span>
                    <div class="listDes">
                        <span class="listName">养生之道</span>
                        <span>刚刚</span>
                    </div>
                </div>
                <img class="yangshengICON"
                     src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/community/1%402x.png" alt="">
            </div>
            <!--社区热闻-->
            <div class="newsList">
                <div class="hotnewcontaienr">
                    <p class="hotnewsLabel">【最强“水果养生”榜，你爱吃的上榜了吗】瓜果飘香的季节就要到啦~~~吃水果不但利口，还能“对症”养生！</p>
                    <div class="hotnewsImgList">
                        <img class="hotnewsimg"
                             src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/community/2%402x.png" alt="">
                        <img class="hotnewsimg"
                             src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/community/3%402x%281%29.png"
                             alt="">
                        <img class="hotnewsimg"
                             src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/community/3%402x.png" alt="">
                    </div>
                    <div class="listDes">
                        <span class="listName">社区热文</span>
                        <span>16分钟前</span>
                    </div>
                </div>
            </div>
            <!--新闻列表-->
            <div class="newsListArea">
                <span class="newsName">史上最全的水果养生</span>
                <div class="newsInfo">
                    <span class="newsinfodes">水果好神奇，居然有这么多我们不曾熟知的养生功效，忒强大了，哇！必须留下！贫血:葡萄、柚子、番茄、苹果、草莓、樱桃...</span>
                    <img class="infologo" src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/community/4%402x.png" alt="">
                </div>
                <div class="newsDesArea">
                    <span>社区热文</span>
                    <span>5月28日 16:08:36</span>
                </div>
            </div>
        </div>
        <!--全局提示消息-->
        <BaseMessage :message="mymessage" v-if="showmessage"/>
    </div>
</template>
<style lang='scss'>
    @import "community";
</style>

